<template>
    <div>
        <!--面包屑导航-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/stuhome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>作业列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!--用户列表主部分-->
        <template>

            <el-card>
            <el-row :gutter="25">
                <el-col span="10">
                <!--搜索区--> 
                   <el-input placeholder="输入搜索内容" v-model="queryInfo.query" clearable @clear="getWorkList1">
                    <el-button slot="append" icon="el-icon-search" @click="getWorkList1"></el-button>
                   </el-input>
                </el-col>
            </el-row>
            <!--表格 border边框 stripe隔行变色-->
            <el-table :data="workList1" border stripe>
                <el-table-column label="标题" prop="wtitle"></el-table-column>
                <el-table-column label="内容" prop="wcontent"></el-table-column>
                <el-table-column label="图片" prop="bpicture">
                    <template slot-scope="scope">
                   <span  style="color: #409eff;cursor pointer" @click="showEditDialog1(scope.row)">{{scope.row.bpicture}}</span>
                   </template>
                </el-table-column>

                <el-table-column label="开始时间" prop="wbtime"></el-table-column>
                <el-table-column label="截止时间" prop="wetime" ></el-table-column>
                <el-table-column label="提交状态" prop="fwstate" ></el-table-column>
                <el-table-column label="成绩" prop="fwgrade" ></el-table-column>
                 <el-table-column label="评语" prop="fwcomment" ></el-table-column>
                <el-table-column label="操作" prop="Action">
        
               <template slot-scope="scope">
               <el-button type="primary" size="mini" @click="showEditDialog(scope.row)">查看</el-button>
               </template>
               </el-table-column>
            </el-table>
            <!--分页组件-->
            <div>
                <el-pagination
                    @size-change="handleSizeChange1"
                    @current-change="handleCurrentChange1"
                    :current-page="currentPage4"
                    :page-sizes="[5, 10, 20, 30]"
                    :page-size="queryInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </el-card>
      </template>
        
         <!--查看图片区域弹窗-->

        <el-dialog title="文书图片" :visible.sync="showDialogVisible1" width="50%" @close="showDialogClose1">

            <el-form :model="showForm" ref="showFormRef" label-width="70px"></el-form>

            <div style="display: inline; color: #20a0ff;margin-left: 50px;margin-right:20px;font-size: 12px;">

                <div><img :src="showForm.bpicture" ></div>
              </div>
              <span slot="footer" class="dialog-footer">  
                <el-button @click="showDialogVisible1=false">关闭</el-button>
                
            </span>

        </el-dialog>
        <!--提交作业弹窗-->
        <el-dialog wtitle="提交作业" :visible.sync="editDialogVisible" wwidth="50%" @close="editDialogClose">
            <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-wwidth="70px">
                <el-form-item label="标题" prop="wtitle">
                    <el-input v-model="editForm.wtitle" disabled></el-input>
                </el-form-item>
                <el-form-item label="作业内容" prop="wcontent">
                    <el-input v-model="editForm.wcontent" disabled></el-input>
                </el-form-item>
                <el-form-item label="编辑作业" prop="fwtext">
                    <el-input type="textarea" autosize placeholder="请输入作业内容" v-model="editForm.fwtext"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">  
                <el-button @click="editDialogVisible=false">取消</el-button>
                <!--若截止时间<当前时间 按钮禁用-->
                <el-button type="primary" @click="editWork" :disabled="Date.parse(editForm.wetime)<Date.now()-1000*60*60*24?ture:false">确认提交</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    export default{
        created(){
           this.getWorkList1();
          
        },
        data(){
            return{
                //查询信息实体 this.$store.state.nowtname2 this.$store.state.nowtpwd2
                queryInfo:{
                    query:"",
                    pageNum:1,
                    pageSize:5,
                    nowsname:this.$userMsg.sname,
                    nowspwd:this.$userMsg.spwd
                },
                workList1:[],//作业列表
                total:0,
                //对话框状态
                editDialogVisible:false,
                showDialogVisible1:false,
                //表单信息
                editForm:{
                    wtitle:"",
                    wcontent:"",
                    wetime:"",
                    fwtext:"",
                },
                showForm:{

                    bid:"",

                    bname:"",

                    bpicture:"",

                    bowner:"",

                    borigin:"",

                    brank:"",

                    btext:""

                },
                
               
            }

        },
        methods:{
           async getWorkList1(){
                const {data:res} =await this.$http.get("allSeeHomeworkStu",{params:this.queryInfo});
                this.workList1=res.data;//列表数据封装
                this.total=res.number;//总数封装
            },
            
            //最大数
            handleSizeChange1(newSize){
                this.queryInfo.pageSize=newSize;
                this.getWorkList1();
            },
            //pageNum的触发
            handleCurrentChange1(newPage){
                this.queryInfo.pageNum=newPage;
                this.getWorkList1();
            },
            async showEditDialog1(s){
                this.showForm=s;//存储查询信息
                this.showDialogVisible1=true;//开启框
            },
             showDialogClose1(){

                this.$refs.showFormRef.resetFields();
            },
           
            
            //提交作业
            //显示对话框，按钮触发
            async showEditDialog(s){
                this.editForm=s;//存储查询信息
                this.editDialogVisible=true;//开启编辑框
            },
            //监听批阅操作
            editDialogClose(){
                this.$refs.editFormRef.resetFields();//关闭窗口，重置信息
            },
            //确认批阅
            editWork(){
                this.$refs.editFormRef.validate(async valid=>{
                    if(!valid) return;
                   const {data:res}=await this.$http.put("editFinishworkS",this.editForm);
                   if(res!="success"){
                       return this.$message.error("提交失败！");
                   }else{
                   this.$message.success("提交完成！");
                   this.editDialogVisible=false;
                   this.getWorkList1();
                  
                   }
                });
                   
            },
        }

    }
</script>
<style  scoped>
.el-breadcrumb{
    margin-bottom: 15px;
    font-size: 15px;
}
</style>